<template>
  <div class="report-container">
    <!-- <div class="preview-header">
      <div class="audit-btn-box audit-btn-first">
        <span class="preview-text1">表单系统</span>
        <span class="line">|</span>
        <span class="preview-text2">结果统计</span>
      </div>
      <div class="header-tabs">
        <el-tabs v-model="headerActiveName">
          <el-tab-pane label="" :name="1"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="audit-btn-box audit-btn-last">
        <button class="preview-btn" @click="exit">
          <i class="iconfont">&#xe8b0;</i>
          关闭
        </button>
      </div>
    </div> -->
    <div class="report-content">
      <formStatistics v-if="headerActiveName === 1" :formId="curFormId" maxHeight="75vh" />
    </div>
  </div>
</template>
<script setup>
import { ref, computed, onBeforeMount } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { decrypt } from '@ruifox-cms/utils'
import formStatistics from '@/views/form/manage/components/statistics/formStatistics.vue'

const router = useRouter()
const route = useRoute()
const curFormId = computed(() => {
  return decrypt(router.currentRoute.value.query.formId)
})
const headerActiveName = ref(1)
// 退出
// const exit = () => {
//   window.close()
// }
onBeforeMount(() => {
  if (route.query.activeName === 'statistics') {
    headerActiveName.value = 1
  }
})
</script>
<style lang="scss" scoped>
.report-container {
  height: calc(100vh);
  box-sizing: border-box;
  background: #f4f4f4;
  .preview-header {
    height: 64px;
    background-color: $mainColor;
    display: flex;
    padding: 0 20px;
    justify-content: space-between;
    align-items: center;
    .header-tabs {
      ::v-deep(.el-tabs__item) {
        color: $white;
      }
      ::v-deep(.el-tabs__item.is-active) {
        color: $white;
      }
      ::v-deep(.el-tabs__nav-wrap::after) {
        background: transparent;
      }
      ::v-deep(.el-tabs__active-bar) {
        background: $white;
      }
      ::v-deep(.el-tabs__header) {
        margin: 0;
      }
    }
    .audit-btn-box {
      min-width: 300px;
      display: flex;
      align-items: center;
      .preview-btn {
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 15px;
        border: 1px solid $white;
        border-radius: 4px;
        background-color: inherit;
        color: $white;
        margin-right: 10px;
        cursor: pointer;
        transition: all 0.3s;
        .iconfont {
          margin-right: 3px;
        }
      }
      .preview-btn.preview-way-btn:hover {
        color: $mainColor;
        background-color: $white;
      }
      .preview-btn.preview-way-btn.active {
        color: $mainColor;
        background-color: $white;
      }
      .preview-btn:hover {
        background-color: rgba($white, 0.1);
      }
      .preview-text1 {
        font-size: 14px;
        color: $white;
      }
      .preview-text2 {
        font-size: 14px;
        color: $white;
      }
      .line {
        margin: 0 10px;
        color: $white;
      }
    }
    .audit-btn-last {
      display: flex;
      justify-content: flex-end;
    }
  }
  .report-content {
    padding-top: 20px;
    width: 70%;
    margin: 0 auto;
  }
}

@media screen and (max-width: 1440px) {
  .report-content {
    width: 80% !important;
  }
}
@media screen and (max-width: 980px) {
  .report-content {
    width: 90% !important;
  }
}
@media screen and (max-width: 750px) {
  .report-content {
    width: 100% !important;
  }
}
</style>
